<template>
	<div class="demandHistory">
		<div v-if="history && history.length > 0">
			<div class="item-list" v-for="(item, index) in history" @click="aduio_click(item)">
	  		<p>{{item.audio_title}}</p>
    		<div class="tip" v-show="item.checkisthree == 0">
    			<span>{{item.column_title}} |</span>
    			<span> {{item.cate_title}}</span>
    		</div>
        <div class="tip" v-show="item.checkisthree == 1">       
    			<span>{{item.column_title}} |</span>
    			<span>{{item.column_title}} |</span>
    			<span> {{item.cate_title}}</span>
        </div>
	  	</div>
  	</div>
		<div class="none" v-else>
			<img src="@/assets/kongzhuangtai.png" alt="">
		</div>
	</div>
</template>
<script type="text/javascript">	
	import { baseUrl, get_play_history } from '@/api/api'
	export default {
	  components: {
	  },
	  data () {
	    return {
	    	tabIndex: 1,
	    	history: {}
	    }
	  },
	  created () {
			this.get_play_historys()
	  },
	  methods: {  
	    aduio_click(item) {
	      if(item.checkIsThree == 1){
	        this.router({path: 'audioDetails', query:{id: item.audio_id, is_three: true}})
	      }else{
	        this.router({path: 'audioDetails', query:{id: item.audio_id, is_three: false}})
	      }
	    }, 
	    router (path) {
	      this.$router.push(path)
	    },
	  	onItemClick (index) {
	  		this.tabIndex = index
	  	},
	  	get_play_historys () {
	  		get_play_history().then((res) => {
	  			this.history = res.data.info
	  		}).catch((err) => {
	  			console.dir(err)
	  		})
	  	}
	  }
	}
</script>
<style lang="stylus" scoped>	
.demandHistory
	background-color #fff
	min-width 100vw
	min-height 100vh
	.none
		img			
			width 15.4rem
			position absolute
			left 50%
			margin-left -7.7rem
			top 50%
			margin-top -9.6rem
	.item-list
		padding 2rem 0
		margin 0 1.5rem
		border-bottom 1px solid #e6e6e6
		p
			color #333
			font-weight bold
			font-size 1.5rem
			line-height 1.5rem
		.tip
			font-size 1.2rem
			line-height 1.2rem
			color #999
			margin-top 1.2rem
</style>